<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/personal.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="index_header">
        <div class="index_header_bg">
            <img src="https://www.hotread.com/assets/images/newlogo.png" alt="">
            <div class="hotreadAndGirl">
                <span class="on" onclick="jumpShouye()">火星小说</span>
                <span>|</span>
                <span onclick="jumpNv()">火星女频</span>
            </div>
            <div class="search-content">
                <input type="text" placeholder="龙王棺" class="search-text">
                <img src="../img/index_search.png" alt="">
            </div>
            <div class="main-login">
                <div>
                    <span>书架</span>
                    <span>|</span>
                    <span>充值</span>
                </div>
                <div>
                    <span>注册</span>
                    <span>|</span>
                    <span>张三</span>
                </div>
            </div>
        </div>
        <ul>
            <li style="color: #333;">
                热搜：
            </li>
            <li>
                <span>
                    蛇孽
                </span>
            </li>
            <li>
                <span>
                    湘西秘闻
                </span>
            </li>
            <li>
                <span>
                    重生1980
                </span>
            </li>
        </ul>
    </div>
    <!-- tab栏 -->
    <div class="hotr-nav" id="hotr-nav" style="height: 59px;">
        <ul class="nav-main-win-head">
            <li onclick="jumpShouye()">首页</li>
            <li onclick="jumpRank()">排行</li>
            <li onclick="jumpBook()">书库</li>
            <li onclick="jumpManhua()">动漫</li>
            <li onclick="jumpClient()">客户端</li>
            <li onclick="jumpWelfare()">作家福利</li>
            <li onclick="jumpAuthor()">作者中心</li>
        </ul>
    </div>
    <!-- 中部内容 -->
    <div class="userCenter">
        <div class="userCenter-leftNav">
            <ul>
                <li class="on bookrack-trigger">我的书架</li>
                <li class="account-trigger">我的账户</li>
                <li class="management-trigger">账户管理</li>
            </ul>
        </div>
        <div class="userCenter-rightBox">
            <!-- 书籍列表区域 -->
            <div class="bookrack-content">
                <div class="bookrack-title">
                    <span class="amend-btn">编辑</span>
                </div>
                <div class="bookrack-rect">

                </div>

                <!-- 编辑工具栏 -->
                <div class="edit-toolbar">
                    <button class="select-all-btn">全选</button>
                    <button class="delete-btn">删除</button>
                    <button class="finish-btn">完成</button>
                </div>
            </div>

            <!-- 账户信息区域 -->
            <div class="account-info">
                <div class="account-container">
                    <div class="account-header">账户信息</div>

                    <div class="account-tabs">
                        <div class="account-tab active" data-tab="info">个人信息</div>
                        <div class="account-tab" data-tab="password">修改密码</div>
                    </div>

                    <!-- 个人信息内容 -->
                    <div class="tab-content active" id="info-tab">
                        <!-- 头像上传区域 -->
                        <div class="avatar-container">
                            <div class="avatar-preview">
                                <img id="avatar-preview"
                                    src="https://ts1.tc.mm.bing.net/th/id/R-C.ef9fe6b6c9bee0d0bcdd4d3f9d577352?rik=da2yUUouSRLByA&riu=http%3a%2f%2fpic.imeitou.com%2fuploads%2fallimg%2f221014%2f8-221014162617.jpg&ehk=YOyFF8BR6WpJuEOHR1pUpUDPVhwvlxrhnRGUUrvQiHc%3d&risl=&pid=ImgRaw&r=0"
                                    alt="头像">
                            </div>
                            <div class="avatar-upload">
                                <input type="file" id="avatar-input" accept="image/*">
                                <button type="button" class="upload-btn" id="upload-avatar-btn">上传头像</button>
                                <div class="upload-tip">支持JPG、PNG格式，大小不超过2M</div>
                            </div>
                        </div>

                        <div class="user-info-item">
                            <div class="user-info-label">用户名：</div>
                            <div class="user-info-value">张三</div>
                        </div>
                        <div class="user-info-item">
                            <div class="user-info-label">手机号：</div>
                            <div class="user-info-value">138****1234</div>
                        </div>
                        <div class="user-info-item">
                            <div class="user-info-label">邮箱：</div>
                            <div class="user-info-value">666666@qq.com</div>
                        </div>
                        <div class="user-info-item">
                            <div class="user-info-label">注册时间：</div>
                            <div class="user-info-value">2025-09-08</div>
                        </div>

                        <div class="account-header" style="margin-top: 30px; border: none;">修改个人信息</div>
                        <form id="info-form">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" id="username" value="张三">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" id="email" value="666666@qq.com">
                            </div>
                            <div class="form-group">
                                <label for="phone">手机号</label>
                                <input type="text" id="phone" value="138****1234">
                            </div>
                            <button type="button" class="save-btn">保存信息</button>
                        </form>
                    </div>

                    <!-- 修改密码内容 -->
                    <div class="tab-content" id="password-tab">
                        <form id="password-form">
                            <div class="form-group">
                                <label for="old-password">原密码</label>
                                <input type="password" id="old-password" placeholder="请输入原密码">
                            </div>
                            <div class="form-group">
                                <label for="new-password">新密码</label>
                                <input type="password" id="new-password" placeholder="请输入新密码">
                            </div>
                            <div class="form-group">
                                <label for="confirm-password">确认密码</label>
                                <input type="password" id="confirm-password" placeholder="请再次输入新密码">
                            </div>
                            <button type="button" class="save-btn">修改密码</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 账户管理 -->
            <div class="account-management">
                <div class="moneyRect">
                    <ul class="remainingRect">
                        <li>
                            <label>火星币余额：</label>
                            <span>0</span>
                            <em>&nbsp;火星币</em>
                        </li>
                        <li>
                            <label>火星券余额：</label>
                            <span>0</span>
                            <em>&nbsp;火星券</em>
                        </li>
                        <p class="topUpBtn">充值</p>
                    </ul>
                    <ul class="cutRect">
                        <li class="on" data-record="topup">充值记录</li>
                        <li data-record="coupon">火星券记录</li>
                        <li data-record="consume">消费记录</li>
                    </ul>
                    <!-- 充值记录内容 -->
                    <div class="record-content active" id="topup-record">
                        <ul class="topUp-resultRect">
                            <li class="list-title">
                                <span class="quantity">充值火星币数量</span>
                                <span class="sum">消费金额</span>
                                <span class="time">充值时间</span>
                                <span class="way">充值方式</span>
                                <span class="state">充值状态</span>
                            </li>
                            <li class="result-empty">
                                <p>暂无充值记录</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 火星券记录内容 -->
                    <div class="record-content" id="coupon-record">
                        <ul class="topUp-resultRect">
                            <li class="list-title">
                                <span class="quantity">火星券数量</span>
                                <span class="sum">获取方式</span>
                                <span class="time">获取时间</span>
                                <span class="way">有效期</span>
                                <span class="state">状态</span>
                            </li>
                            <li class="result-empty">
                                <p>暂无火星券记录</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 消费记录内容 -->
                    <div class="record-content" id="consume-record">
                        <ul class="topUp-resultRect">
                            <li class="list-title">
                                <span class="quantity">消费火星币数量</span>
                                <span class="sum">消费内容</span>
                                <span class="time">消费时间</span>
                                <span class="way">消费方式</span>
                                <span class="state">状态</span>
                            </li>
                            <li class="result-empty">
                                <p>暂无消费记录</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const mockBookData = {
        code: 200,
        data: [
            { bookId: 1015460, title: "走阴门", author: "长耳朵的兔", cover: "https://p1.duyao001.com/image/common/abe2dd7d4eab8c3f9d293efc7887e57a_x640.jpg", latestChapter: "第1366章 尾声", over: 0 },
            { bookId: 1014720, title: "一人一驴一狗去修仙", author: "三界新圣主", cover: "https://p2.duyao001.com/image/common/f8af55df5dba3c2a9186c42b28ebaafb_x640.jpg", latestChapter: "第2227章 好弹，再见李嫣然", over: 1 },
            { bookId: 1015019, title: "天命出马仙2", author: "吴半仙", cover: "https://p0.duyao001.com/image/common/3e1570fd23a9feea410fb8abe4693fcf_x640.jpg", latestChapter: "第888章 画上句号（大结局）", over: 0 },
            { bookId: 1013902, title: "茅山升棺人", author: "盗门九当家", cover: "https://p1.duyao001.com/image/common/d78c5bf9bc11b6c2c35669c0a9dcd16b_x640.jpg", latestChapter: "第834章 靠哥哥没什么不好", over: 0 }
        ]
    };

    // 获取DOM元素
    const bookrack_rect = document.querySelector('.bookrack-rect');
    const amendBtn = document.querySelector('.amend-btn');
    const editToolbar = document.querySelector('.edit-toolbar');
    const selectAllBtn = document.querySelector('.select-all-btn');
    const deleteBtn = document.querySelector('.delete-btn');
    const finishBtn = document.querySelector('.finish-btn');
    const accountTrigger = document.querySelector('.account-trigger');
    const bookrackTrigger = document.querySelector('.bookrack-trigger');
    const managementTrigger = document.querySelector('.management-trigger');
    const bookrackContent = document.querySelector('.bookrack-content');
    const accountInfo = document.querySelector('.account-info');
    const accountManagement = document.querySelector('.account-management');
    const accountTabs = document.querySelectorAll('.account-tab');
    const tabContents = document.querySelectorAll('.tab-content');
    const recordTabs = document.querySelectorAll('.cutRect li');
    const recordContents = document.querySelectorAll('.record-content');

    // 头像上传相关元素
    const avatarInput = document.getElementById('avatar-input');
    const uploadAvatarBtn = document.getElementById('upload-avatar-btn');
    const avatarPreview = document.getElementById('avatar-preview');

    // 编辑模式状态
    let isEditMode = false;
    let selectedBooks = new Set();

    // 渲染书籍列表
    let addbook = JSON.parse(localStorage.getItem('savedBooks'))
    console.log(addbook);
    function renderBooks() {
        bookrack_rect.innerHTML = '';
        addbook.forEach(item => {
            bookrack_rect.innerHTML += `
                <div class="book-list" data-bookid="${item.id}"  ondblclick="delete1(${item.id})">
                    ${!item.finishTime ? `<input type="checkbox" class="checkbox">` : ''}
                    <img src="${item.cover}" alt="">
                    <h3 class="bookName">
                        ${item.name}
                    </h3>
                    <p class="old">
                        还未读过
                    </p>
                    <p class="new">
                        最新更新：${item.latestChapter}
                    </p>
                    <i class="${item.finishTime === 0 ? 'endLog' : 'updating'}"></i>
                </div>
            `;
        });
        // 如果在编辑模式，绑定选择事件
        if (isEditMode) {
            bindSelectEvents();
        }
    }
    renderBooks()
    // 绑定选择事件
    function bindSelectEvents() {
        const bookLists = document.querySelectorAll('.book-list');
        const checkboxes = document.querySelectorAll('.checkbox');

        bookLists.forEach((book, index) => {
            book.addEventListener('click', (e) => {
                if (e.target !== checkboxes[index]) {
                    checkboxes[index].click();
                }
            });
        });

        checkboxes.forEach((checkbox, index) => {
            checkbox.addEventListener('change', function () {
                const bookId = bookLists[index].dataset.bookid;
                if (this.checked) {
                    selectedBooks.add(bookId);
                    bookLists[index].classList.add('selected');
                } else {
                    selectedBooks.delete(bookId);
                    bookLists[index].classList.remove('selected');
                }
                updateSelectAllState();
            });
        });
    }

    // 更新全选按钮状态
    function updateSelectAllState() {
        const checkboxes = document.querySelectorAll('.checkbox');
        const allChecked = checkboxes.length > 0 &&
            Array.from(checkboxes).every(checkbox => checkbox.checked);
        selectAllBtn.textContent = allChecked ? '取消全选' : '全选';
    }

    // 切换编辑模式
    function toggleEditMode() {
        isEditMode = !isEditMode;
        amendBtn.textContent = isEditMode ? '取消' : '编辑';
        editToolbar.classList.toggle('show', isEditMode);
        renderBooks();
    }

    // 全选/取消全选
    function toggleSelectAll() {
        const checkboxes = document.querySelectorAll('.checkbox');
        const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);

        checkboxes.forEach(checkbox => {
            checkbox.checked = !allChecked;
            checkbox.dispatchEvent(new Event('change'));
        });

        selectAllBtn.textContent = !allChecked ? '取消全选' : '全选';
    }

    // 删除选中书籍
   // 删除选中书籍（同步删除localStorage数据）
    function deleteSelectedBooks() {
        if (selectedBooks.size === 0) {
            alert('请先选择要删除的书籍');
            return;
        }
        if (confirm(`确定要删除选中的${selectedBooks.size}本书籍吗？`)) {
            let savedBooks = JSON.parse(localStorage.getItem('savedBooks')) || [];
            savedBooks = savedBooks.filter(item => !selectedBooks.has(String(item.id)));
            localStorage.setItem('savedBooks', JSON.stringify(savedBooks));
             addbook = savedBooks;
            selectedBooks.clear();
            renderBooks();
        }
        
    }

    // 完成编辑
    function finishEdit() {
        selectedBooks.clear();
        toggleEditMode();
        renderBooks();
    }

    // 切换到书架页面
    function showBookrack() {
        bookrackContent.classList.remove('hidden');
        accountInfo.classList.remove('active');
        accountManagement.classList.remove('active');
        bookrackTrigger.classList.add('on');
        accountTrigger.classList.remove('on');
        managementTrigger.classList.remove('on');
    }

    // 切换到账户页面
    function showAccount() {
        bookrackContent.classList.add('hidden');
        accountInfo.classList.add('active');
        accountManagement.classList.remove('active');
        bookrackTrigger.classList.remove('on');
        accountTrigger.classList.add('on');
        managementTrigger.classList.remove('on');
    }
    
    // 切换到账户管理页面
    function showAccountManagement() {
        bookrackContent.classList.add('hidden');
        accountInfo.classList.remove('active');
        accountManagement.classList.add('active');
        bookrackTrigger.classList.remove('on');
        accountTrigger.classList.remove('on');
        managementTrigger.classList.add('on');
    }
    
    // 切换记录标签
    function switchRecordTab(recordType) {
        // 更新标签页激活状态
        recordTabs.forEach(tab => {
            if (tab.dataset.record === recordType) {
                tab.classList.add('on');
            } else {
                tab.classList.remove('on');
            }
        });
        
        // 显示对应的内容
        recordContents.forEach(content => {
            if (content.id === recordType + '-record') {
                content.classList.add('active');
            } else {
                content.classList.remove('active');
            }
        });
    }

    // 切换账户标签页
    function switchTab(tabName) {
        // 更新标签页激活状态
        accountTabs.forEach(tab => {
            if (tab.dataset.tab === tabName) {
                tab.classList.add('active');
            } else {
                tab.classList.remove('active');
            }
        });

        // 显示对应的内容
        tabContents.forEach(content => {
            if (content.id === tabName + '-tab') {
                content.classList.add('active');
            } else {
                content.classList.remove('active');
            }
        });
    }

    // 保存个人信息
    function saveUserInfo() {
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;

        // 这里应该发送请求到服务器保存数据
        alert('个人信息保存成功！');
        console.log('保存的用户信息:', { username, email, phone });
    }

    // 修改密码
    function changePassword() {
        const oldPassword = document.getElementById('old-password').value;
        const newPassword = document.getElementById('new-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;

        // 验证密码
        if (!oldPassword || !newPassword || !confirmPassword) {
            alert('请填写所有密码字段');
            return;
        }

        if (newPassword !== confirmPassword) {
            alert('新密码和确认密码不一致');
            return;
        }

        // 这里应该发送请求到服务器修改密码
        alert('密码修改成功！');
        console.log('修改密码:', { oldPassword, newPassword });

        // 清空密码字段
        document.getElementById('old-password').value = '';
        document.getElementById('new-password').value = '';
        document.getElementById('confirm-password').value = '';
    }

    // 处理头像预览
    function handleAvatarPreview(event) {
        const file = event.target.files[0];
        if (file) {
            // 检查文件类型
            if (!file.type.match('image.*')) {
                alert('请选择图片文件！');
                return;
            }

            // 检查文件大小 (2MB)
            if (file.size > 2 * 1024 * 1024) {
                alert('图片大小不能超过2MB！');
                return;
            }

            // 预览图片
            const reader = new FileReader();
            reader.onload = function (e) {
                avatarPreview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }

    // 触发文件选择
    function triggerFileSelect() {
        avatarInput.click();
    }

    // 初始渲染
    // renderBooks();

    // 绑定事件
    amendBtn.addEventListener('click', toggleEditMode);
    selectAllBtn.addEventListener('click', toggleSelectAll);
    deleteBtn.addEventListener('click', deleteSelectedBooks);
    finishBtn.addEventListener('click', finishEdit);
    accountTrigger.addEventListener('click', showAccount);
    bookrackTrigger.addEventListener('click', showBookrack);
    managementTrigger.addEventListener('click', showAccountManagement);

    // 绑定账户标签页切换事件
    accountTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            switchTab(tab.dataset.tab);
        });
    });

    // 绑定记录标签切换事件
    recordTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            switchRecordTab(tab.dataset.record);
        });
    });

    // 绑定保存按钮事件
    document.querySelector('#info-form .save-btn').addEventListener('click', saveUserInfo);
    document.querySelector('#password-form .save-btn').addEventListener('click', changePassword);

    // 绑定头像上传事件
    uploadAvatarBtn.addEventListener('click', triggerFileSelect);
    avatarInput.addEventListener('change', handleAvatarPreview);
</script>
<script>
    function jumpShouye(){
        location.href = "index.html";
    }
    function jumpNv(){
        location.href = "channel.html";
    }
    function jumpManhua(){
        location.href='./comic.html?'
    }
    function jumpBook(){
        location.href='./book.html?'
    }
    function jumpAuthor(){
        location.href='./personal.html?'
    }
    function jumpRank(){
        location.href='./rank.html?'
    }
    function jumpClient(){
        location.href='./client.html?'
    }
    function jumpRegis() {
        location.href='./register.html?'
    }
    function jumpWelfare() {
        location.href='./author.html'
    }
</script>
</html>